<template>
    <div style="margin-top: 30px; padding-right: 20px">
        <el-form label-width="100px" inline class="inlineClass">
            <el-form-item label="表单">
                <el-select v-model="searchFormId" placeholder="表单" @change="changeForm()" :clearable="true">
                    <el-option :label="item.nameCn" :value="item.id" v-for="item in onlineFormList" :key="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="表单版本">
                <el-select v-model="searchFormVersion" placeholder="表单版本">
                    <el-option :label="item.innerName" :value="item.version" v-for="item in formVersionList" :key="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="外部接口编码">
                <el-input v-model="searchFormInterfaceCode" placeholder="外部接口ID" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetForm()">重 置</el-button>
                <el-button type="primary" :loading="searchLoading" @click="searchClick()">查 询</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div style="display: flex; justify-content: right">
        <el-button type="primary" style="margin-right: 20px" @click="addFormInterface()">添加外部接口</el-button>
    </div>

    <div style="padding-left: 20px; padding-right: 20px; margin-top: 20px" v-loading="formTableLoading">
        <el-table
            :data="formInterfaceDataList"
            style="width: 100%;"
            row-key="id"
            border
            :stripe="true"
            :show-overflow-tooltip="true"
            class="tableContainer"
            max-height="70vh"
        >
            <el-table-column prop="id" label="外部接口ID" />
            <el-table-column prop="code" label="外部接口编码" />
            <el-table-column prop="nameCn" label="外部接口中文名" />
            <el-table-column prop="nameEn" label="外部接口英文名" />
            <el-table-column prop="formId" label="表单ID" />
            <el-table-column prop="formVersion" label="表单版本" />
            <el-table-column prop="status" label="状态" >
                <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.status === `DRAFT`">草稿</el-tag>
                    <el-tag type="success" v-if="scope.row.status === `ONLINE`">已发布</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="currentVersion" label="当前版本" align="center">
                <template #default="scope">
                    <a style="display:block;width:100%;color: #409EFF" @click="versionClick(scope.$index, scope.row)">
                        {{scope.row.currentVersion}}
                        <component is="CopyOutlined" v-if="scope.row.hasNotReleased" style="padding-left: 1%"/>
                    </a>
                </template>
            </el-table-column>

            <el-table-column align="center" width="300px">
                <template #header>
                    <span>操 作</span>
                </template>
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleUpdateInterface(scope.$index, scope.row)">编 辑</el-button>
                    <el-button size="small" type="success" @click="handlePublishInterface(scope.$index, scope.row)">发 布</el-button>
                    <el-button type="danger" size="small" @click="handleDeleteInterface(scope.$index, scope.row)">删 除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div style="padding-right: 20px;">
        <el-pagination
            v-model:current-page="pageIndex"
            v-model:page-size="pageSize"
            layout="prev, pager, next, jumper, sizes, total"
            :background="true"
            :total="recordCount"
            style="margin-top: 30px;width: 100%;display: flex; align-items: center;justify-content: right"
            @change="changePage"
            :page-sizes="[10, 20, 30, 40, 50]"
        />
    </div>

    <div>
        <el-dialog
            v-model="isShowDrawer"
            :title="showTitle"
            width="40%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <el-form label-width="10%" style="margin-top: 30px" :model="dialogFormInfo" :rules="formRules" ref="dialogFormRef">
                <el-form-item label="外部接口编码" label-width="20%" prop="code">
                    <el-input v-model="dialogFormInfo.code" placeholder="外部接口编码" clearable :disabled="!isAdd"/>
                </el-form-item>
                <el-form-item label="外部接口中文名称" label-width="20%" prop="nameCn">
                    <el-input v-model="dialogFormInfo.nameCn" placeholder="外部接口中文名称" clearable />
                </el-form-item>
                <el-form-item label="外部接口英文名称" label-width="20%" prop="nameEn">
                    <el-input v-model="dialogFormInfo.nameEn" placeholder="外部接口英文名称" clearable />
                </el-form-item>
                <el-form-item label="表单" label-width="20%" prop="formId">
                    <el-select v-model="dialogFormInfo.formId" placeholder="表单" @change="changeDialogForm()" :clearable="true" :disabled="!isAdd">
                        <el-option :label="item.nameCn" :value="item.id" v-for="item in onlineFormList" :key="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="表单版本" label-width="20%" prop="version">
                    <el-select v-model="dialogFormInfo.version" placeholder="表单版本" @change="changeDialogVersion()" :disabled="!isAdd">
                        <el-option :label="item.innerName" :value="item.version" v-for="item in dialogVersionList" :key="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="接口条件字段" label-width="20%" prop="condition">
                    <el-select v-model="dialogFormInfo.condition" placeholder="接口条件字段" multiple>
                        <el-option :label="item.labelName" :value="item.code" v-for="item in dialogFormJsonList" :key="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="接口返回字段" label-width="20%" prop="result">
                    <el-select v-model="dialogFormInfo.result" placeholder="接口返回字段" multiple>
                        <el-option :label="item.labelName" :value="item.code" v-for="item in dialogFormJsonList" :key="item.id"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="cancelAddFormInterface()">取消</el-button>
                <el-button @click="commitAddFormInterface(dialogFormRef)" :loading="addFormInterfaceLoading" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isDeleteShowDrawer"
            title="删除表单接口"
            width="20%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <span>是否确认删除？</span>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="cancelDeleteFormInterface()">取消</el-button>
                <el-button @click="commitDeleteFormInterface()" :loading="deleteInterfaceLoading" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isPublishShowDrawer"
            title="发布表单接口"
            width="20%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <span>是否确认发布？</span>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="cancelPublishFormInterface()">取消</el-button>
                <el-button @click="commitPublishFormInterface()" :loading="publishInterfaceLoading" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isVersionListShowDrawer"
            title="历史版本"
            width="70%"
            :close-on-click-modal="false"
        >
            <el-table
                :data="versionList"
                style="width: 100%;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
            >
                <el-table-column prop="id" label="版本ID" />
                <el-table-column prop="nameCn" label="外部接口中文名" />
                <el-table-column prop="nameEn" label="外部接口英文名" />
                <el-table-column prop="formId" label="表单ID" />
                <el-table-column prop="formVersion" label="表单版本" />
                <el-table-column prop="version" label="接口版本" />
                <el-table-column align="center" width="300px">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="handleVersionTest(scope.$index, scope.row)">调 试</el-button>
                        <el-button size="small" v-if="scope.row.version !== 0" type="success" @click="handleBackVersion(scope.$index, scope.row)">回 退</el-button>
                        <el-button type="danger" v-if="scope.row.version === 0" size="small" @click="handleDeleteVersion(scope.$index, scope.row)">删 除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isDeleteVersionShowDrawer"
            title="删除草稿版本"
            width="20%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <span>是否确认删除？</span>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="cancelDeleteVersionInterface()">取消</el-button>
                <el-button @click="commitDeleteVersionInterface()" :loading="deleteVersionInterfaceLoading" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isBackVersionShowDrawer"
            title="回退版本"
            width="20%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <span>是否确认回退？</span>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="cancelBackVersionInterface()">取消</el-button>
                <el-button @click="commitBackVersionInterface()" :loading="backVersionInterfaceLoading" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isTestVersionShowDrawer"
            title="接口调试"
            width="70%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <el-divider>输入</el-divider>
            <el-form label-width="10%" style="margin-top: 30px">
                <el-form-item v-for="(item, index) in testVersionComponentList" :label="item.labelName">
                    <el-input v-model="item.value"></el-input>
                </el-form-item>
            </el-form>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="commitTestVersionInterface()" :loading="testVersionInterfaceLoading" type="primary">调 试</el-button>
            </div>
            <el-divider>输出</el-divider>
            <el-input v-model="outputInfo" disabled type="textarea" :autosize="{ minRows: 5, maxRows: 10 }"/>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="isTestVersionShowDrawer = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup name="FormInterfaceList">
import {
    backInterfaceVersion,
    createFormInterface, deleteFormInterface, deleteInterfaceVersion, execByVersion, publishFormInterface,
    queryFormInterfacePageList,
    queryFormPageList, queryInterfaceVersionList,
    queryVersionInfo,
    queryVersionList, updateFormInterface
} from "@/request/flow";
import {ElNotification} from "element-plus";
import YwuFormInput from "@/views/bpmn/form/component/YwuFormInput.vue";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {createTag} from "@/utils/ywuCommon.js";

let route = useRoute();
createTag(route);

let searchFormInterfaceCode = ref("");
let searchFormId = ref("");
let searchFormVersion = ref("");
let onlineFormList = ref([]);
let formVersionList = ref([]);
let searchLoading = ref(false);
let pageIndex = ref(1);
let pageSize = ref(10);
let recordCount = ref(0);
let formInterfaceDataList = ref([]);
let isShowDrawer = ref(false);
let showTitle = ref("");
let isAdd = ref(true);
let dialogFormInfo = ref({});
let dialogVersionList = ref([]);
let dialogFormJsonList = ref([]);
let addFormInterfaceLoading = ref(false);
let formTableLoading = ref(false);
let formRules = ref({
    code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
        nameCn: [{ required: true, message: '中文名称不能为空', trigger: 'blur' }],
        nameEn: [{ required: true, message: '英文名称不能为空', trigger: 'blur' }],
        formId: [{ required: true, message: '表单不能为空', trigger: 'blur' }],
        version: [{ required: true, message: '版本不能为空', trigger: 'blur' }],
        condition: [{ required: true, message: '条件不能为空', trigger: 'blur' }],
        result: [{ required: true, message: '返回字段不能为空', trigger: 'blur' }]
});
let isDeleteShowDrawer = ref(false);
let deleteInterfaceLoading = ref(false);
let isPublishShowDrawer = ref(false);
let publishInterfaceLoading = ref(false);
let isVersionListShowDrawer = ref(false);
let versionList = ref([]);
let isDeleteVersionShowDrawer = ref(false);
let deleteVersionLoading = ref(false);
let versionInfo = ref({});
let deleteVersionInterfaceLoading = ref(false);
let isBackVersionShowDrawer = ref(false);
let backVersionInterfaceLoading = ref(false);
let isTestVersionShowDrawer = ref(false);
let testVersionInterfaceLoading = ref(false);
let testVersionGlobalProperties = ref({
    colNum: 1
});
let testVersionComponentList = ref([]);
let formColStyle = ref("");
let outputInfo = ref("");
let testVersionInfo = ref({});

function changeForm() {
    formVersionList.value = []
    searchFormVersion.value = "";
    // 查询当前表单的
    if (searchFormId.value) {
        // 查询当前表单下的所有版本
        let param = {
            id: searchFormId.value
        }
        queryVersionList(param).then(res => {
            if (res.code === "200") {
                formVersionList.value = []
                let dataInfo = res.data;
                for (let index = 0; index < dataInfo.length; index++) {
                    if (dataInfo[index].version === 0) {
                        continue;
                    }
                    dataInfo[index].innerName = "版本" + dataInfo[index].version;
                    formVersionList.value.push(dataInfo[index])
                }
            }
        })
    }
}

function changeDialogForm() {
    dialogVersionList.value = []
    dialogFormInfo.value.version = ""
    // 查询当前表单的
    if (dialogFormInfo.value.formId) {
        // 查询当前表单下的所有版本
        let param = {
            id: dialogFormInfo.value.formId
        }
        queryVersionList(param).then(res => {
            if (res.code === "200") {
                dialogVersionList.value = []
                let dataInfo = res.data;
                for (let index = 0; index < dataInfo.length; index++) {
                    if (dataInfo[index].version === 0) {
                        continue;
                    }
                    dataInfo[index].innerName = "版本" + dataInfo[index].version;
                    dialogVersionList.value.push(dataInfo[index])
                }
            }
        })
    }
}

function changeDialogVersion() {
    dialogFormJsonList.value = [];
    dialogFormInfo.value.condition = [];
    // 查询表单基本信息
    queryVersionInfo({resourceId: dialogFormInfo.value.formId, version: dialogFormInfo.value.version}).then(res => {
        let formJson = res.data.formJson
        // 序列化json
        let jsonInfo = JSON.parse(formJson);
        dialogFormJsonList.value = jsonInfo.componentJson
    })
}

function resetForm() {
    searchFormInterfaceCode.value = "";
    searchFormId.value = "";
    searchFormVersion.value = "";
}

function searchClick() {
    searchLoading.value = true;
    // 分页查询列表
    let pageParam = {
        pageInfo: {
            pageIndex: pageIndex.value,
            pageSize: pageSize.value
        },
        code: searchFormInterfaceCode.value,
        formId: searchFormId.value,
        formVersion: searchFormVersion.value
    }
    queryFormInterfacePageList(pageParam).then(res => {
        if (res.code === "200") {
            pageIndex.value = res.data.pageIndex;
            pageSize.value = res.data.pageSize;
            recordCount.value = res.data.recordCount;
            formInterfaceDataList.value = res.data.dataList;
        }
        searchLoading.value = false;
    }).catch(res => {
        searchLoading.value = false;
    })
}

function changePage() {
    // 分页查询列表
    let pageParam = {
        pageInfo: {
            pageIndex: pageIndex.value,
            pageSize: pageSize.value
        },
        code: searchFormInterfaceCode.value,
        formId: searchFormId.value,
        formVersion: searchFormVersion.value
    }
    queryFormInterfacePageList(pageParam).then(res => {
        if (res.code === "200") {
            pageIndex.value = res.data.pageIndex;
            pageSize.value = res.data.pageSize;
            recordCount.value = res.data.recordCount;
            formInterfaceDataList.value = res.data.dataList;
        }
    })
}

function addFormInterface() {
    showTitle.value = "添加外部接口";
    isAdd.value = true;
    dialogFormInfo.value = {};
    dialogVersionList.value = [];
    dialogFormJsonList.value = [];
    isShowDrawer.value = true;
}

function versionClick(index, row) {
    // 查询表单外部接口历史版本列表
    let param = {
        id: row.id
    }
    versionList.value = []
    isVersionListShowDrawer.value = true;
    queryInterfaceVersionList(param).then(res => {
        if (res.code === "200") {
            let dataInfo = res.data;
            for (let index = 0; index < dataInfo.length; index++) {
                versionList.value = res.data;
            }
        }
    })
}

function handleUpdateInterface(index, row) {
    showTitle.value = "修改外部接口";
    isAdd.value = false;
    dialogFormInfo.value = {
        id: row.id,
        code: row.code,
        nameCn: row.nameCn,
        nameEn: row.nameEn,
        formId: row.formId,
        version: parseInt(row.formVersion),
        condition: JSON.parse(row.formConditionJson),
        result: JSON.parse(row.formResJson),
    };
    dialogVersionList.value = [];
    dialogFormJsonList.value = [];
    isShowDrawer.value = true;
    // 根据当前的formId查询版本列表
    // 查询当前表单下的所有版本
    let param = {
        id: dialogFormInfo.value.formId
    }
    queryVersionList(param).then(res => {
        if (res.code === "200") {
            dialogVersionList.value = []
            let dataInfo = res.data;
            for (let index = 0; index < dataInfo.length; index++) {
                if (dataInfo[index].version === 0) {
                    continue;
                }
                dataInfo[index].innerName = "版本" + dataInfo[index].version;
                dialogVersionList.value.push(dataInfo[index])
            }
        }
    })
    // 根据表单ID和版本查询数据
    queryVersionInfo({resourceId: dialogFormInfo.value.formId, version: dialogFormInfo.value.version}).then(res => {
        let formJson = res.data.formJson
        // 序列化json
        let jsonInfo = JSON.parse(formJson);
        dialogFormJsonList.value = jsonInfo.componentJson
    })
}

function handleDeleteInterface(index, row) {
    dialogFormInfo.value.id = row.id;
    isDeleteShowDrawer.value = true;
}

function cancelDeleteFormInterface() {
    isDeleteShowDrawer.value = false;
}

function commitDeleteFormInterface() {
    // 删除元素
    deleteInterfaceLoading.value = true;
    deleteFormInterface({id: dialogFormInfo.value.id}).then(res => {
        if (res.code === "200") {
            ElNotification({
                title: 'Success',
                message: res.message,
                type: 'success',
            })
        }
        // 分页查询列表
        let pageParam = {
            pageInfo: {
                pageIndex: pageIndex.value,
                pageSize: pageSize.value
            },
            code: searchFormInterfaceCode.value,
            formId: searchFormId.value,
            formVersion: searchFormVersion.value
        }
        queryFormInterfacePageList(pageParam).then(res => {
            if (res.code === "200") {
                pageIndex.value = res.data.pageIndex;
                pageSize.value = res.data.pageSize;
                recordCount.value = res.data.recordCount;
                formInterfaceDataList.value = res.data.dataList;
            }
            isDeleteShowDrawer.value = false;
            deleteInterfaceLoading.value = false;
        }).catch(res => {
            isDeleteShowDrawer.value = false;
            deleteInterfaceLoading.value = false;
        })
    }).catch(res => {
        isDeleteShowDrawer.value = false;
        deleteInterfaceLoading.value = false;
    })
}

function handlePublishInterface(index, row) {
    dialogFormInfo.value.id = row.id;
    isPublishShowDrawer.value = true;
}

function cancelPublishFormInterface() {
    isPublishShowDrawer.value = false;
}

function commitPublishFormInterface() {
    publishInterfaceLoading.value = true;
    // 发布
    publishFormInterface({id: dialogFormInfo.value.id}).then(res => {
        if (res.code === "200") {
            ElNotification({
                title: 'Success',
                message: res.message,
                type: 'success',
            })
        }
        // 分页查询列表
        let pageParam = {
            pageInfo: {
                pageIndex: pageIndex.value,
                pageSize: pageSize.value
            },
            code: searchFormInterfaceCode.value,
            formId: searchFormId.value,
            formVersion: searchFormVersion.value
        }
        queryFormInterfacePageList(pageParam).then(res => {
            if (res.code === "200") {
                pageIndex.value = res.data.pageIndex;
                pageSize.value = res.data.pageSize;
                recordCount.value = res.data.recordCount;
                formInterfaceDataList.value = res.data.dataList;
            }
            isPublishShowDrawer.value = false;
            publishInterfaceLoading.value = false;
        }).catch(res => {
            isPublishShowDrawer.value = false;
            publishInterfaceLoading.value = false;
        })
    }).catch(res => {
        isPublishShowDrawer.value = false;
        publishInterfaceLoading.value = false;
    })
}

function cancelAddFormInterface() {
    isShowDrawer.value = false;
}

let dialogFormRef = ref();
function commitAddFormInterface(formEl) {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            addFormInterfaceLoading.value = true;
            // 判断是添加还是修改
            if (isAdd.value) {
                dialogFormInfo.value.formConditionJson = JSON.stringify(dialogFormInfo.value.condition);
                dialogFormInfo.value.formResJson = JSON.stringify(dialogFormInfo.value.result)
                dialogFormInfo.value.formVersion = dialogFormInfo.value.version
                createFormInterface(dialogFormInfo.value).then(res => {
                    if (res.code === "200") {
                        ElNotification({
                            title: 'Success',
                            message: res.message,
                            type: 'success',
                        })
                    }
                    // 分页查询列表
                    let pageParam = {
                        pageInfo: {
                            pageIndex: pageIndex.value,
                            pageSize: pageSize.value
                        },
                        code: searchFormInterfaceCode.value,
                        formId: searchFormId.value,
                        formVersion: searchFormVersion.value
                    }
                    queryFormInterfacePageList(pageParam).then(res => {
                        if (res.code === "200") {
                            pageIndex.value = res.data.pageIndex;
                            pageSize.value = res.data.pageSize;
                            recordCount.value = res.data.recordCount;
                            formInterfaceDataList.value = res.data.dataList;
                        }
                        isShowDrawer.value = false;
                        addFormInterfaceLoading.value = false;
                    }).catch(res => {
                        isShowDrawer.value = false;
                        addFormInterfaceLoading.value = false;
                    })
                }).catch(res => {
                    isShowDrawer.value = false;
                    addFormInterfaceLoading.value = false;
                })
            } else {
                dialogFormInfo.value.formConditionJson = JSON.stringify(dialogFormInfo.value.condition);
                dialogFormInfo.value.formResJson = JSON.stringify(dialogFormInfo.value.result)
                dialogFormInfo.value.formVersion = dialogFormInfo.value.version
                updateFormInterface(dialogFormInfo.value).then(res => {
                    if (res.code === "200") {
                        ElNotification({
                            title: 'Success',
                            message: res.message,
                            type: 'success',
                        })
                    }
                    // 分页查询列表
                    let pageParam = {
                        pageInfo: {
                            pageIndex: pageIndex.value,
                            pageSize: pageSize.value
                        },
                        code: searchFormInterfaceCode.value,
                        formId: searchFormId.value,
                        formVersion: searchFormVersion.value
                    }
                    queryFormInterfacePageList(pageParam).then(res => {
                        if (res.code === "200") {
                            pageIndex.value = res.data.pageIndex;
                            pageSize.value = res.data.pageSize;
                            recordCount.value = res.data.recordCount;
                            formInterfaceDataList.value = res.data.dataList;
                        }
                        isShowDrawer.value = false;
                        addFormInterfaceLoading.value = false;
                    }).catch(res => {
                        isShowDrawer.value = false;
                        addFormInterfaceLoading.value = false;
                    })
                }).catch(res => {
                    isShowDrawer.value = false;
                    addFormInterfaceLoading.value = false;
                })
            }
        }
    })

}

function handleVersionTest(index, row) {
    isTestVersionShowDrawer.value = true
    testVersionComponentList.value = []
    outputInfo.value = ""
    testVersionInfo.value = {
        resourceId: row.resourceId,
        version: row.version
    }
    // 根据当前的表单ID和版本查询对应的表单构建信息
    queryVersionInfo({resourceId: row.formId, version: row.formVersion}).then(res => {
        let formJson = res.data.formJson
        // 序列化json
        let jsonInfo = JSON.parse(formJson);
        testVersionGlobalProperties.value = jsonInfo.globalProperties
        let componentList = jsonInfo.componentJson
        let style = "display: grid;gap: 16px;"
        let repeat = `grid-template-columns: repeat(${testVersionGlobalProperties.value.colNum}, 1fr);`
        formColStyle.value = style + repeat;
        // 与当前的配置的入参进行遍历，找出已经配置的组件
        let conditionIdList = JSON.parse(row.formConditionJson)
        for (let index = 0; index < componentList.length; index++) {
            for (let innerIndex = 0; innerIndex < conditionIdList.length; innerIndex++) {
                if (componentList[index].code === conditionIdList[innerIndex]) {
                    testVersionComponentList.value.push({
                        labelName: componentList[index].labelName,
                        id: conditionIdList[innerIndex],
                        value: ""
                    })
                }
            }
        }
    })
}

function handleBackVersion(index, row) {
    versionInfo.value.resourceId = row.resourceId
    versionInfo.value.version = row.version;
    isBackVersionShowDrawer.value = true;
}

function handleDeleteVersion(index, row) {
    versionInfo.value.resourceId = row.resourceId
    versionInfo.value.version = row.version;
    isDeleteVersionShowDrawer.value = true;
}

function cancelDeleteVersionInterface() {
    isDeleteVersionShowDrawer.value = false
}

function commitDeleteVersionInterface() {
    deleteVersionInterfaceLoading.value = true;
    deleteInterfaceVersion(versionInfo.value).then(res => {
        if (res.code === "200") {
            ElNotification({
                title: 'Success',
                message: res.message,
                type: 'success',
            })
        }
        // 查询表单外部接口历史版本列表
        let param = {
            id: versionInfo.value.resourceId
        }
        versionList.value = []
        isVersionListShowDrawer.value = true;
        queryInterfaceVersionList(param).then(res => {
            if (res.code === "200") {
                let dataInfo = res.data;
                for (let index = 0; index < dataInfo.length; index++) {
                    versionList.value = res.data;
                }
            }
            deleteVersionInterfaceLoading.value = false;
            isDeleteVersionShowDrawer.value = false;
        }).catch(res => {
            deleteVersionInterfaceLoading.value = false;
            isDeleteVersionShowDrawer.value = false;
        })
    }).catch(res => {
        deleteVersionInterfaceLoading.value = false;
        isDeleteVersionShowDrawer.value = false;
    })
}

function cancelBackVersionInterface() {
    isBackVersionShowDrawer.value = false;
}

function commitBackVersionInterface() {
    backVersionInterfaceLoading.value = true;
    backInterfaceVersion(versionInfo.value).then(res => {
        if (res.code === "200") {
            ElNotification({
                title: 'Success',
                message: res.message,
                type: 'success',
            })
        }
        // 查询表单外部接口历史版本列表
        let param = {
            id: versionInfo.value.resourceId
        }
        versionList.value = []
        isVersionListShowDrawer.value = true;
        queryInterfaceVersionList(param).then(res => {
            if (res.code === "200") {
                let dataInfo = res.data;
                for (let index = 0; index < dataInfo.length; index++) {
                    versionList.value = res.data;
                }
            }
            backVersionInterfaceLoading.value = false;
            isBackVersionShowDrawer.value = false;
        }).catch(res => {
            backVersionInterfaceLoading.value = false;
            isBackVersionShowDrawer.value = false;
        })
    }).catch(res => {
        backVersionInterfaceLoading.value = false;
        isBackVersionShowDrawer.value = false;
    })
}

function commitTestVersionInterface() {
    testVersionInfo.value.execParam = testVersionComponentList.value
    testVersionInterfaceLoading.value = true
    // 执行调试
    execByVersion(testVersionInfo.value).then(res => {
        outputInfo.value = JSON.stringify(res);
        testVersionInterfaceLoading.value = false
    }).catch(res => {
        testVersionInterfaceLoading.value = false
    })
}

onMounted(() => {
    // 查询表单列表
    let param = {
        pageInfo: {
            pageIndex: 1,
            pageSize: 10000
        },
        status: "ONLINE"
    }
    queryFormPageList(param).then(res => {
        onlineFormList.value = res.data.dataList;
    })
    // 查询表单外部接口列表
    let pageParam = {
        pageInfo: {
            pageIndex: pageIndex.value,
            pageSize: pageSize.value
        }
    }
    queryFormInterfacePageList(pageParam).then(res => {
        if (res.code === "200") {
            pageIndex.value = res.data.pageIndex;
            pageSize.value = res.data.pageSize;
            recordCount.value = res.data.recordCount;
            formInterfaceDataList.value = res.data.dataList;
        }
    })
})
</script>

<style scoped lang="less">
.formSubmitButton {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.inlineClass ::v-deep .el-form-item__content {
    width: 300px;
}
</style>